<template>
	<view>
		<navbar :parameter='parameter'></navbar>
		<view class="pic-box acea-row">
			<view class="pic-item" :class="index==TabCur?'selected':''" v-for="(item,index) in list"
				@click="select(item,index)">
				<!-- <image :src="item.src" mode="aspectFill"></image> -->
				<image :src="imageUrl+item.image" mode="aspectFill"></image>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn" @click="share"> 确定 </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '推广给朋友',
					'color': false,
				},
				imageUrl: this.imageUrl,
				pic: '',
				list: [],
				TabCur: -1,
				avatar: '',
				nickname: ''
			}
		},
		onLoad(option) {
			this.avatar = option.avatar;
			this.nickname = option.nickname;
			this.posterLists()
		},
		onShow() {

		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {

		},
		onShareTimeline(res) { //分享到朋友圈

		},
		methods: {
			async posterLists() {
				const res = await this.$myRequest({
					url: '/api/index/posterLists',

				})
				this.list = res.data.data
			},
			select(item, index) {
				this.TabCur = index;
				this.pic = this.imageUrl + item.image;

				console.log(this.pic)
			},
			share() {
				uni.navigateTo({
					url: "/pages/user/code_share?pic=" + this.pic + '&avatar=' + this.avatar + '&nickname=' + this
						.nickname
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pic-box {
		width: 100%;
		padding: 30rpx;
	}

	.pic-box .pic-item {
		width: 221rpx;
		height: 221rpx;
		margin-right: 13.5rpx;
		margin-bottom: 16rpx;
		position: relative;
	}

	.pic-box .pic-item::before {
		content: "";
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .2);
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.pic-box .pic-item:nth-of-type(3n) {
		margin-right: 0;
	}

	.pic-box .pic-item image {
		width: 100%;
		height: 100%;
	}

	.pic-box .pic-item.selected {
		border: 1px solid #DE2318;
		position: relative;
	}

	.pic-box .pic-item.selected::before {
		font-family: "iconfont";
		display: block;
		content: "\e60f";

		color: #fff;
		font-size: 20rpx;
		width: 30rpx;
		height: 24rpx;
		text-align: center;
		line-height: 30rpx;
		background-color: transparent;
		z-index: 2;
		padding-left: 14rpx;
		box-sizing: border-box;
	}

	.pic-box .pic-item.selected::after {
		display: block;
		content: "";
		position: absolute;
		bottom: 0;
		right: 0;
		width: 0;
		height: 0;
		border-bottom: 24rpx solid #DE2318;
		border-left: 30rpx solid transparent;
		z-index: 1;
	}

	.btn-box {
		width: 100%;
		position: fixed;
		bottom: 60rpx;
		left: 0;
	}

	.btn {
		width: 80%;
		margin: 0 auto;
		margin-top: 60rpx;
		height: 80rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #347DFE;
		color: #fff;
		font-size: 32rpx;
	}
</style>
